<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>New Order</title>
    <script type="text/javascript" src="../js/OrderTab.js"></script>
</head>
<body>
<div th:replace="common/top"></div>
<div id="BackLink">
    <a href="/catalog/view">
        Return to Main Menu
    </a>
</div>
<div id="Center-Content">
    <p th:if="${orderMsg != null}" th:text="${orderMsg}"> </p>



    <table class="rwd-table">
        <tr>
            <th align="center" colspan="2">Order
                <span th:text="'#' + ${session.order.orderId} + ' ' + ${{session.order.orderDate}}"></span>
<!--                <fmt:formatDate value="${session.order.orderDate}"-->
<!--                                pattern="yyyy/MM/dd hh:mm:ss" /></th>-->
        </tr>
        <tr>
            <th colspan="2">Payment Details</th>
        </tr>
        <tr>
            <td>Card Type:</td>
            <td th:text="${session.order.cardType}" /></td>
        </tr>
        <tr>
            <td>Card Number:</td>
            <td th:text="${session.order.creditCard}" /> </td>
        </tr>
        <tr>
            <td>Expiry Date (MM/YYYY):</td>
            <td th:text="${session.order.expiryDate}" /></td>
        </tr>
        <tr>
            <th colspan="2">Billing Address</th>
        </tr>
        <tr>
            <td>First name:</td>
            <td th:text="${session.order.billToFirstName}" /></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td th:text="${session.order.billToLastName}" /></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td th:text="${session.order.billAddress1}" /></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td th:text="${session.order.billAddress2}" /></td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${session.order.billCity}" /></td>
        </tr>
        <tr>
            <td>State:</td>
            <td th:text="${session.order.billState}" /></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td th:text="${session.order.billZip}" /></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td th:text="${session.order.billCountry}" /></td>
        </tr>
        <tr>
            <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
            <td>First name:</td>
            <td th:text="${session.order.shipToFirstName}" /></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td th:text="${session.order.shipToLastName}" /></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td th:text="${session.order.shipAddress1}" /></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td th:text="${session.order.shipAddress2}" /></td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${session.order.shipCity}" /></td>
        </tr>
        <tr>
            <td>State:</td>
            <td th:text="${session.order.shipState}" /></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td  th:text="${session.order.shipZip}" /></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td th:text="${session.order.shipCountry}" /></td>
        </tr>
        <tr>
            <td>Courier:</td>
            <td th:text="${session.order.courier}" /></td>
        </tr>
        <tr>
            <td colspan="2">Status: <span th:text="${session.order.status}" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <table class="rwd-table">
                    <tr>
                        <th>Item ID</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total Cost</th>
                    </tr>
<!--                    <c:forEach var="lineItem" items="${session.order.lineItems}">-->
                    <tr th:each="lineItem:${session.order?.lineItems}">
                        <td>
                            <a th:href="@{/catalog/viewItem(itemId=${lineItem.item.itemId})}">
                                <span th:text="${lineItem.item.itemId}"></span>
                            </a>
                        </td>
                        <td th:if="${lineItem.item != null}">
                            <span th:text="${lineItem.item.attribute1} + ' ' + ${lineItem.item.product.name}"></span>
                        </td>
                        <td th:if="${lineItem.item == null}">
                                <i>{description unavailable}</i>
                        </td>

                        <td th:text="${lineItem.quantity}"></td>
<!--                            <td><fmt:formatNumber value="${lineItem.unitPrice}"-->
<!--                                                  pattern="$#,##0.00" /></td>-->
                        <td th:text="'$' + ${lineItem.unitPrice}"></td>
<!--                            <td><fmt:formatNumber value="${lineItem.total}"-->
<!--                                                  pattern="$#,##0.00" /></td>-->
                        <td th:text="'$' + ${lineItem.total}"></td>
                    </tr>
<!--                    </c:forEach>-->
                    <tr>
                        <th colspan="5">Total:
<!--                            <fmt:formatNumber-->
<!--                                    value="${session.order.totalPrice}" pattern="$#,##0.00" />-->
                            <span th:text="'$' + ${session.order.totalPrice}"></span>
                        </th>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

    <p th:if="${session.order.status} == 'U'">
        <a th:href="@{/alipay/payorder(orderId=${session.order.orderId})}" class="register-link"> Go and get the order paid by Alipay. </a>
    </p>
    
</div>

<div th:replace="common/bottom"></div>
</body>
</html>